<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>事件</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			#box {
				width: 200px;
				height: 200px;
				background-color: red;
			}

			#click {
				width: 100px;
				height: 100px;
				background-color: yellow;
				margin: 0 auto;
			}

			#a {
				width: 200px;
				height: 200px;
				background-color: red;
				position: relative;
			}

			#b {
				width: 200px;
				height: 200px;
				background-color: black;
				position: absolute;
				left: 300px;
			}

		</style>
	</head>
	<body>
		<div id="box" onclick="test()"></div>

		<div id="click"></div>

		<div id="a">
			<div id="b"></div>
		</div>
	</body>
</html>
<script>
	// 事件: 对浏览器产生影响的行为
	// 鼠标事件
	// 键盘事件
	// 其它事件

	// 给元素添加事件的方式
	// 1. 给元素添加行内属性绑定事件
	// 2. 通过js给元素绑定事件

	function test() {
		alert(1111);
	}

	var clickDiv = document.getElementById('click');
	var scale = 1;
	var timer = null;
	// 单击事件
	// clickDiv.onclick = function() {
	// 	var _this = this;
	// 	clearTimeout(timer);
	// 	timer = setTimeout(function() {
	// 		scale *= 2;
	// 		_this.style.transform = "scale(" + scale + ")";
	// 		console.log(_this.clientWidth);
	// 	}, 500);
	// };

	// 双击事件
	// clickDiv.ondblclick = function() {
	// 	// console.log("双击");
	// 	clearTimeout(timer);
	// 	scale /= 2;
	// 	this.style.transform = "scale(" + scale + ")";
	// };

	// 鼠标点击事件
	// clickDiv.onclick = function() {
	// 	console.log("点击了鼠标");
	// };

	// 鼠标按下事件
	// clickDiv.onmousedown = function() {
	// 	console.log("按下了鼠标");
	// };

	// 鼠标抬起事件
	// clickDiv.onmouseup = function() {
	// 	console.log("松开了鼠标");
	// };

	// 鼠标移动事件
	// clickDiv.onmousemove = function() {
	// 	console.log("鼠标移动事件");
	// };

	// 鼠标悬浮事件
	// clickDiv.onmouseover = function() {
	// 	console.log("鼠标悬浮事件");
	// };

	// 鼠标离开元素的事件
	// clickDiv.onmouseout = function() {
	// 	console.log("鼠标离开事件");
	// };

	// clickDiv.onmouseenter = function() {
	// 	console.log("鼠标进入事件");
	// };

	// clickDiv.onmouseleave = function() {
	// 	console.log("鼠标离开事件");
	// };

	// 不要这样用
	// 有id属性的元素, id名代表该元素, 是window的属性
	// a.onclick = function() {
	// 	console.log("点击了a");
	// };

	// b.onclick = function() {
	// 	console.log("点击了b");
	// };

	// a.onmouseover = function() {
	// 	console.log("a");
	// };

	// b.onmouseover = function() {
	// 	console.log("b");
	// };


	// onmouseover和onmouseenter效果一样, 只不过后者不会触发事件冒泡
	// onmouseout和onmouseleave效果一样, 只不过后者不会触发事件冒泡
	// a.onmouseenter = function() {
	// 	console.log("a");
	// };

	// b.onmouseenter = function() {
	// 	console.log("b");
	// };


	// 鼠标右键点击事件
	document.oncontextmenu = function() {
		console.log("点击了右键");
		return false;
	};


</script>